<html>
<head>
    <title>LocalPix</title>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAT1uo0SSkJNXzR5BVm3lBZxQLdBQDC_WNldTFMeuLnkYTj9lLcRQ5j1l-mfA0XT1B_7UwbRgPXx8LOw" type="text/javascript"></script>

    <script type="text/javascript">
        var map;
        $(document).ready(function() {
            map = new GMap2($('#map').get(0));
            map.addControl(new GSmallZoomControl());

            GEvent.addListener(map, "moveend", mapMoved);

            $('#addressForm input:button').bind('click',function() {
                geocodeAddress($('#address').val(), function(lat, lng, address) {
                    // show result from geocode on page
                    $('#geocodeResult').html('lat: ' + lat + ' lng: ' + lng + ' address: ' + address);

                    // set map center (fires "moveend" event)
                    map.setCenter(new GLatLng(lat, lng), 17);
                });
            });
        });

        // get all the flickr images within the map's bounding box and draw them
        function mapMoved() {
            // get map bounding box
            var swCorner = map.getBounds().getSouthWest();
            var neCorner = map.getBounds().getNorthEast();

            // flickr's required bounding box format
            var bbox = swCorner.lng() + ',' + swCorner.lat()+',' + neCorner.lng() + ',' + neCorner.lat();

            // fetch some flicker images based on the boundries of the map post-move.
            getFlickrImagesByGeo(bbox, drawFlickrImageOnMap);
        }

       /*
        * turn flicker search result record into marker on map.
        *
        * <photo accuracy="16" longitude="-77.036551" latitude="38.898802"
        *        isfamily="0" isfriend="0" ispublic="1" title="La Casa Blanca"
        *        farm="3" server="2154" secret="018ec212b3" owner="52384575@N00" id="2510721741"/>
        */
        function drawFlickrImageOnMap(photoEl) {
            var photo = $(photoEl);
            // get all the attrs we need to create a url for the small image
            var secret  = photo.attr('secret');
            var owner   = photo.attr('owner');
            var farm    = photo.attr('farm');
            var server  = photo.attr('server');
            var picId   = photo.attr('id');
            var imglat  = photo.attr('latitude');
            var imglng  = photo.attr('longitude');

            // assemble icon URL
            var imgIcon = new GIcon(G_DEFAULT_ICON, 'http://farm'+farm+'.static.flickr.com/'+server+'/'+picId+'_'+secret+'_s.jpg');
            imgIcon.iconSize = new GSize(40, 40);

            // create GMarker overlay.
            var imgMarker = new GMarker(new GLatLng(imglat, imglng), { icon:imgIcon });

            // on image click, go to photo on flickr site.
            GEvent.addListener(imgMarker, "click", function() {
                location.href = "http://flickr.com/photos/" + owner +"/" + picId
            });

            map.addOverlay(imgMarker);
        }

       /*
        * use the flicker api to search by bounding box. pass each of the result records to a callback function.
        *
        * the result records look like this:
        *
        * <photo accuracy="16" longitude="-77.036551" latitude="38.898802"
        *        isfamily="0" isfriend="0" ispublic="1" title="La Casa Blanca"
        *        farm="3" server="2154" secret="018ec212b3" owner="52384575@N00" id="2510721741"/>
        *
        * @param bbox     - the bounding box to look for images
        *                       format: [SW corner lng],[SW corner lat],[NE corner lng],[NE corner lat]
        * @param callback - the callback to use for each photo in the results.
        *                       callback sig: function myCallback(Element photo) {}
        */
        function getFlickrImagesByGeo(bbox, callback) {
            $.get('/proxy.jsp', {url:'http://api.flickr.com/services/rest/?method=flickr.photos.search&sort=interestingness-desc&api_key=00e2a113f4aad69116bb5f4704ef1c14&per_page=100&extras=geo&min_taken_date=2008-01-01&bbox='+bbox}, function(xmlDoc) {
                // iterate the photo elements in the response XML and pass each one to the callback.
                $(xmlDoc).find('photo').each(function() {
                    callback(this);
                });
            }, 'XML');
        }

        /*
         * geocode the address and call the passed callback method with the important bits.
         *
         * @param address  - String "1600 Pennsylvania Avenue NW Washington, DC 20500"
         * @param callback - function to call with result of geocode - function(String latitude,String longitude,String address) {}
         */
        function geocodeAddress(address, callback) {
            $.get('/proxy.jsp', {url: 'http://rpc.geocoder.us/service/csv?address=' + encodeURIComponent(address)}, function(response) {
                var lat = response.split(',')[0];
                var lng = response.split(',')[1];
                var addr = response.split(',')[2];
                callback(lat, lng, addr);
            }, 'TEXT');
        }
    </script>
</head>
<body>
<form id="addressForm">
    <input id="address" size="50" value="1600 Pennsylvania Avenue NW Washington, DC 20500"/>
    <!--
    1530 Lombard Street San Francisco, CA 94123
    1600 Pennsylvania Avenue NW Washington, DC 20500
    506 Main Street, Westbrook, Maine
    -->
    <input type="button" value="geocode"/>
</form>

<div id="geocodeResult"></div>
<div id="map" style="width: 600px; height: 400px"></div>

</body>
</html>

